<template>
    <div style="background: #F7F7F7">
			<div v-if="chenload">
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div id='tabList0'>
						<div style="background: #fff;padding: 0.2rem 0 0.3rem 0">
							<!--搜索框-->
							<div class="search" @click="search()" >
								<img src="../../../src/assets/img/shouye/sousuo.png" alt="">
								搜索课程
							</div>

						</div>
						<div class="chenline-pay"></div>
						<!--推荐-->
						<div class="tuijian" v-if="tuijian.length!=0||tuijian.length!='0'">
							<div class="top">
								<span>推荐</span>
								<img src="../../../src/assets/img/search/fire.png" alt="">
							</div>
							<!--滚动-->
							<div class="swiper-container">
								<div class="swiper-wrapper" >
									<div class="swiper-slide" style="width:5.6rem;" v-for="(item,index) in tuijian" @click="bj(item)">
										<div ref="zi" >
											<div class="hotclass">
												<img :src="img+item.thumb" alt="" style="width: 5.3rem;height: 2.8rem;border-radius: 0.08rem">
												<p class="miaoshu">{{item.name}}</p>
												<!--weiba-->
												<div class="btoS">
													<p class="btosac">
														<img src="../../../src/assets/img/colorren.png" alt="">
														<span>{{item.sales}}人已加入</span>
													</p>
													<p class="btotext btotextactive" v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'">免费</p>
													<p class="btotext" v-else>¥{{item.price}}</p>
												</div>
											</div>
										</div>

									</div>

								</div>
							</div>
						</div>
						<div class="chenline-pay" v-if="typetitle.length!='0'||typetitle.length!=0"></div>

						<!--考试动态-->
						<div id="Marquee" v-if="typetitle.length!='0'||typetitle.length!=0">
							<div class="marall">
								<div class="dongtai">
									<img src="../../../src/assets/img/dongtai.png" alt="">
									<span>考试动态:</span>
								</div>
								<div class="dongtaicon" :class="{marquee_top:animate}">
									<span v-for="item in typetitle" @click="typetitleclick(item.info_id)">{{item.content}}</span>
								</div>
							</div>

						</div>
						<div class="chenline-pay"></div>


					<!--select-->
						<!-- <div id="selectclass">
							<div :class="searchBarFixed?'fix':'rel'" id="Tab"> -->
						<div id="navWarp1">
						<!-- <div  id="selectclass"> -->
							<div id="navContent1">


								<div style="width:6.9rem;margin:auto;display: flex;justify-content:space-between;align-items: center;height: 0.8rem;z-index: 9999999;">
									<!--第一个联动-->
									<div class="shang" @click="btn()" >
										<span :class="quanbu?'blue':'gray'">{{pracite}}</span>
										<img :src="quanbu?imgSrc1:imgSrc2" alt="">
										<!-- <img :src="quanbu?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
									</div>

									<!--第二个联动-->

									<div class="shang" @click="btn1()" >
										<span :class="quanbu1?'blue':'gray'">{{pracite1}}</span>
										<img :src="quanbu1?imgSrc1:imgSrc2" alt="">
										<!-- <img :src="quanbu1?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
									</div>


									<!--第三个联动-->

									<div class="shang" @click="btn2()" >
										<span :class="quanbu2?'blue':'gray'">{{pracite2}}</span>
										<img :src="quanbu2?imgSrc1:imgSrc2" alt="">
										<!-- <img :src="quanbu2?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
									</div>

								</div>
								<div class="pos">
									<div style="overflow:auto;overflow-x:hidden;">
									<transition name="fade">
										<!--第一个-->
										<div  v-if="quanbu" class="qubover" style="background: #fff">
											<div class="xia" v-for="(item,index) in one" @click="xi(item,index)">
												<span :class="item.class_name == pracite?'spanspan1':'spanspan'">{{item.class_name}}</span>
												<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.class_name == pracite">
												<p></p>
											</div>
										</div>
										<!--第二个-->
										<div  v-if="quanbu1" class="qubover" style="background: #fff">
											<div class="xia" v-for="(item,index) in two" @click="xi1(item,index)">
												<span :class="item.name == pracite1?'spanspan1':'spanspan'">{{item.name}}</span>
												<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite1">
												<p></p>
											</div>
										</div>
										<!--第三个-->
										<div  v-if="quanbu2" class="qubover" style="background: #fff">
											<div class="xia" v-if="quanbu2" v-for="(item,index) in t" @click="xi2(item)">
												<span :class="item.name == pracite2?'spanspan1':'spanspan'">{{item.name}}</span>
												<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite2">
												<p></p>
											</div>
										</div>
									</transition>
									</div>
								</div>
							</div>
						
						<!--内容-->
						  <div  class="pad">
									<!--精选-->
									<div>
										<div class="n" v-for="(item,index) in tab0.list" @click="tapclick(item)">
											<img :src="img+item.thumb" alt="" class="img1">
											<div class="right">
												<p>{{item.name}}</p>
												<div class="btoS">
													<p class="btosac">
														<img src="../../../src/assets/img/colorren.png" alt="">
														<span>{{item.sales}}人已加入</span>
													</p>
													<p class="btotext btotextactive" v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'">免费</p>
													<p class="btotext" v-else>¥{{item.price}}</p>
												</div>
											</div>
										</div>
									</div>

						  </div>
						</div>
						
					</div>
				</mescroll-vue>
			</div>
      <div class="loadmore" v-else>
      	<img src="../../../src/assets/img/load.gif" alt="">
      </div>

    </div>
</template>

<script>
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Zhiye",
		components: {
		  MescrollVue
		},
        data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						imgSrctop: require("../../assets/img/backtop.png"), 
						imgSrc1: require("../../assets/img/search/shang.png"), 
						imgSrc2: require("../../assets/img/search/bto.png"), 
            tabType: 0 ,// 菜单类型
            tab0: {mescroll: null, list: [], isListInit: false}, // 全部
            chenload:false,
            b:false,
            arr:[],
            quanbu:false,
            quanbu1:false,
            quanbu2:false,
            input:'',
            pracite:'全部专业',
            pracite1:'全部分类',
            pracite2:'全部类型',
            tuijian:[],
            img:this.$store.state.img,
            one:[],
            two:[
              {
                name:'全部分类',
                sub_id:''
              }
            ],
            t:[
              {
                name:'全部类型',
                lass_id:''
              }
            ],
            class_id:'',
            sub_id:'',
            lass_id:'',
            typetitle:[],   //考试动态
            page:1,
            allLoaded:false,
            searchBarFixed:false,
            timer:null,
            heighttuijian:'',
            animate:false,
          }
      },
		computed: {
		  top() {
			return - this.activeIndex * 0.9 + 'rem';
		  }
		},
		destroyed(){
			clearInterval(this.timer);
			clearInterval(this.timer);
			window.removeEventListener('scroll', this.handleScroll);
		},
        methods:{
			//
			tapclick(item){
				// console.log(11);
				var tag = item.tag;
				var id = item.id;
			  // tag 1  2班级  3专题 4课程
				if(tag==4||tag=='4'){
					var type = item.type;
					this.$router.push({
						path:'/course',
						query:{
						 cid:item.id
						}
					})
					
				}else if(tag==3||tag=='3'){
						this.$router.push({
						path:'/specialtopic',
						query:{
						 stid:id
						}
					})
				}else{
					this.$router.push({
					path:'/class',
					query:{
					 bid:id
					}
				 })
				}

			},
			// 点击考试动态
			typetitleclick(id){
				this.$router.push({
				  path:'/News',
				  query:{
					nid:id
				  }
				})
			},
			// 点击推荐进入详情
		bj(item){
			var type= item.type;
			var kind= item.kind;
			var id = item.id;
            if(type==1||type=='1'){
          		this.$router.push({
          			path:'/course',
          			query:{
          			 cid:item.id
          			}
          		})
          	
            }else if(type==2||type=='2'){
				this.$router.push({
					path:'/specialtopic',
					query:{
					 stid:id
					}
				})
            }else if(type==3||type=='3'){
				this.$router.push({
					path:'/class',
					query:{
					 bid:id
					}
				})
            }
        },
		// 点击搜索
		search(){
			this.$router.push({
				path:'/search',
				query:{
					type:3
				}
			})
		},
        btn(){
          this.quanbu = !this.quanbu;
          this.quanbu1 = false;
          this.quanbu2 = false;
        },
        btn1(){
          this.quanbu1 = !this.quanbu1;
          this.quanbu = false;
          this.quanbu2 = false;
        },
        btn2(){
          this.quanbu2 = !this.quanbu2;
          this.quanbu = false;
          this.quanbu1 = false;
        },
        xi(item,index){
          //点击第一个联动
          this.pracite = item.class_name;
          this.quanbu = !this.quanbu;
          this.class_id = item.class_id;
					this.changeTab();
        },
        xi1(item,index){
          this.pracite1 = item.name;
          this.quanbu1 = !this.quanbu1;
          // console.log(this.two)
          if (index!=0){
            this.thre(index)
          }else {
            this.t = [{
              name:'全部类型',
              lass_id:''
            }]
            this.pracite2 = '全部类型'
            this.lass_id = '';
          }

          this.pracite2 = '全部类型'
          this.sub_id = item.sub_id;
					this.changeTab();
        },
        xi2(item){
          this.pracite2 = item.name;
          this.quanbu2 = !this.quanbu2;

          this.lass_id = item.lass_id;
          this.changeTab();
        },
		getTabData (tabType) {
			if (tabType == null) tabType = this.tabType;
			if (tabType === 0) {
				return this.tab0;
			}
		},
		changeTab () {
			this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
			this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
		},
		mescrollInit0 (mescroll) {
			mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
			this.tab0.mescroll = mescroll;
		},

		getMescrollUp (tabType) {
			return {
				auto: true,
				callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				toTop: {
					//回到顶部按钮
					src: this.imgSrctop, //图片路径,默认null,支持网络图
					offset: 500 //列表滚动1000px才显示回到顶部按钮
				},
				 empty: {
					 warpId: 'tabList0', // 父布局的id;
					 icon: this.imgSrc, // 图标,默认null
					 tip: '暂时没有找到您所需要的内容…', // 提示

				 },
			}
		},
		upCallback (page, mescroll) {
			var that = this;
			if (mescroll.tabType === 0) {
				// 全部
				// that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
				that.axios.get(that.$store.state.url +'course/courseList',{
					 params:{
						class_id:that.class_id,
						sub_id:that.sub_id,
						lass_id:that.lass_id,
						page: page.num,
						limit:page.size,
						new:1,
					 }
				 }).then(res=>{
					// console.log(res.data.data.class)
					that.loadmore = true;
					if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data;
							// var curPageData = res.data.data.lists;
							mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
							 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
							 // window.addEventListener('scroll', that.handleScroll);
							var navWarp1=document.getElementById("navWarp1");
							if(mescroll.os.ios){
								var navContent1=document.getElementById("navContent1");
// 								// navWarp1.style.height=navWarp1.offsetHeight+"px";//固定高度占位,避免悬浮时列表抖动
// 							  // console.log('1199')
// // 						 //ios的悬停效果,通过给navWarp添加nav-sticky样式来实现
								 navContent1.classList.add("nav-sticky1");
//
// 								// $('#navContent1').addClass("nav-sticky")
							}else{
								//android和pc端悬停效果,通过监听mescroll的scroll事件,控制navContent是否为fixed定位来实现
								// navWarp.style.height=navWarp.offsetHeight+"px";//固定高度占位,避免悬浮时列表抖动
								var navContent1=document.getElementById("navContent1");
								mescroll.optUp.onScroll=function(mescroll, y, isUp){
									// var scroll_offset = $('#navContent').offsetTop;
									// console.log("up --> onScroll 列表当前滚动的距离 y = " + y + ", 是否向上滑动 isUp = " + isUp);
									if(y>=navWarp1.offsetTop){
										// $("#navContent").addClass("nav-fixed");
										navContent1.classList.add("nav-fixed1");
									}else{
										// $("#navContent").removeClass("nav-fixed");
										navContent1.classList.remove("nav-fixed1");
									}
								}
							}
					}

				})
			}
		},
        thre(index){
          //获取第三个

          this.t = this.two[index].lass;
          for (var i = 0;i<this.t.length;i++){
            if (this.t[i].lass_id == ''){
              this.t.splice(0,1);
            }
          }

          var obj = {
            name:'全部类型',
            lass_id:''
          }
          this.t.unshift(obj);
        },
		showMarquee: function() {
			this.animate = true;

			setTimeout(() => {
				this.typetitle.push(this.typetitle[0]);

				this.typetitle.shift();

				this.animate = false;
			}, 500);
		},


      },
		destroyed () {
			// window.removeEventListener('scroll', this.handleScroll)
		},
      mounted(){
		  this.sdk.getJSSDK('','',this.$store.state.url);	
		var that = this;
				// that.kc(0);

        //获取推荐班级
        that.axios.get(that.$store.state.url +'course/recom').then(res=>{
          // console.log(res.data)
          if (res.data.errcode == 0||res.data.errcode == '0'){
			var data = res.data.data;
			if(data.length>5){
				that.tuijian = data.slice(0,5);
			}else{
				that.tuijian = data;
			}
          }
        })

      //  获取第一级分类
        that.axios.get(that.$store.state.url +'course/classCate').then(res=>{
          // console.log(res.data)
          if (res.data.errcode == 0||res.data.errcode == '0'){
            that.one = res.data.data;
						// console.log(this.one);
            var obj = {
              class_name:'全部专业',
              class_id:''
            }
            that.one.unshift(obj);
          }
        })

		//  获取第二级分类
		that.axios.get(that.$store.state.url +'course/subCategory').then(res=>{
			// console.log(res.data)
			if (res.data.errcode == 0||res.data.errcode == '0'){
			  that.two = res.data.data;
					// console.log(this.one);
			  var obj = {
				name:'全部分类',
				class_id:''
			  }
			  that.two.unshift(obj);
					// console.log(that.two);
			}
		})

		// 获取考试动态
		that.axios.get(that.$store.state.url +'course/notice',{
			params:{
				type:1,  //1 考试动态 2最新动态
			}
		}).then(res=>{
			 // console.log(res);
			 that.chenload=true;
		  if (res.data.errcode == 0||res.data.errcode == '0'){
			that.typetitle=res.data.data;
				// console.log(that.typetitle);
				if(that.typetitle.length>1){
					setInterval(this.showMarquee, 2000);
				}

		  }
		})

      },
      beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
		  next(vm => {
		    let curMescroll = vm.$refs['mescroll' + vm.tabType]; // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
		    curMescroll && curMescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
		  })
		},
		beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
		  let curMescroll = this.$refs['mescroll' + this.tabType]; // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
		  curMescroll && curMescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
		  next()
		},
	    updated: function () {
			//数据更改后初始化Swiper
			if(this.tuijian.length > 1)
			{
				this.$nextTick(function () {
				  var swiper = new Swiper('.swiper-container', {
					slidesPerView: 'auto',
				  });
				})

			}

	    }
    }
</script>

<style scoped>
	.swiper-container{
		height: 4.5rem;
		padding-left: 0rem;
	}
	.qubover{
		max-height: 5rem;
		overflow-y: scroll;
		background: #FFFFFF;
		position: relative;
		z-index: 99999;
	}
	#tabList0{
		background: #fff;
		padding-bottom: 1rem;
	}
	.pad{
		 background: #fff;
		overflow: hidden;
		height: auto;
	}
	/*ios使用sticky样式实现*/
	.nav-sticky1{
		z-index: 9999;/*需设置zIndex,避免在悬停时,可能会被列表数据遮住*/
		position: -webkit-sticky;
		position: sticky;
		top: 0;/*相对mescroll的div悬停的位置*/
		z-index: 9999999;
		background: #fff;
	}
	/*android和pc端悬停*/
	.nav-fixed1{
		position: fixed;
		top: 0;
		background: #fff;
		width: 7.5rem;
		z-index: 9999999;
	}
	#navContent1{
		background: #fff !important;
	}
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0rem;
	  height: auto;
	}
	.marquee_top {
		transition: all 0.5s;
		margin-top: -0.7rem;
  }
  .swiper-slide{
    text-align: justify;
  }
  .topImg{
    width: 100%;
    height:3.3rem;
    border-radius:0.1rem;
  }
  .search{
    width: 92%;
    margin: auto;
    height: 0.56rem;
    background:rgba(240,240,240,1);
    border:0.01rem solid rgba(237,237,237,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search img{
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.05rem;
  }
  .img{
    width: 100%;
    height: 3.3rem;
    margin-top: 0.16rem;
    border-radius: 0.1rem;
  }
	#Marquee{
		width: 7.5rem;
		height:1.1rem;
		overflow: hidden;
		margin: 0rem auto 0;
		background: #fff;
	}
	.marall{
		width: 6.9rem;
		margin:.2rem auto;
		height:0.7rem;
		background: #F7F7F7;
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
	}
	.dongtaicon{
		/* overflow: hidden; */
		height: .7rem;
	}
  .dongtai{
    width: 100%;
    text-align: left;
    background: #F7F7F7;
    /* margin-top: 0.2rem; */
    border-radius:0.08rem;
    box-sizing: border-box;
	padding: 0 0.16rem 0rem 0.16rem;
    /* padding: 0.15rem 0.16rem 0.19rem 0.16rem; */
  }
  .dongtai img{
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
  .dongtai span:nth-child(2){
    vertical-align: middle;
    font-size: 0.28rem;
    color: #333333;
	line-height: .7rem;
	display: inline-block;
  }
	.dongtaicon{
		/* position: relative;
		z-index: 9999; */
		height: .7rem;
	}
  .dongtaicon span{
    width: 4.8rem;
	  line-height:.7rem;
    font-size: 0.26rem;
    color: #666666;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
		padding-right: .2rem;
  }
/* 	.dongtaicon span:first-child{
		display:inline-block;
	} */
  .tuijian{
    width: 100%;
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.3rem 0 0.3rem 0;
  }
  .top{
    width: 92%;
    margin: auto;
  }
  .top span{
    font-size:0.34rem;
    font-weight:bold;
    line-height:0.32rem;
    vertical-align: middle;
  }
  .top img{
    width: 0.28rem;
    vertical-align: middle;
  }
  .hotclass{
    width: 5.3rem;
    margin-top: 0.2rem;
    position: relative;
		padding-left: .3rem;
  }
  .tie{
    position: absolute;
    left: 0.4rem;
    top: 0;
    width: 1rem;
  }
  .miaoshu{
    width:100%;
    height:0.61rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.25rem;
    white-space:normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .ce{
    margin-top: 0.25rem;
  }
  .ce:after{
    content:'';
    display: block;
    clear: both;
  }
  .leftImg{
    /*width: 100%;*/
    float: left;
  }
  .leftImg div{
    display: inline-block;
    width: 0.8rem;
    text-align: center;
    font-size: 0.24rem;
  }
  .leftImg div img{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
  }
  .leftImg p{
    margin-top: 0.05rem;
  }
  .rightZ{
    float: right;
    text-align: right;
  }
  .rightZ p:nth-child(1),.rightZ p:nth-child(2){
    display: inline-block;
  }
  .rightZ p:nth-child(1){
    font-size:0.3rem;
    font-weight:800;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    /*margin-top: 0.1rem;*/
  }
  .rightZ p:nth-child(2){
    padding: 0 0.1rem 0 0.1rem;
    border:0.02rem solid rgba(255,2,20,1);
    border-radius:0.16rem;
    font-size: 0.24rem;
    color: #FF0214;

    margin-right: 0.02rem;
    margin-top: 0.07rem;
  }
  .rightZ p:nth-child(3){
    width: 2.6rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
    overflow: hidden;
    margin-top: 0.15rem;
    font-size:0.24rem;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }

  .btoS{
    width: 100%;
    /* margin-top: 0.16rem; */
	display: flex;
	justify-content: space-between;
  }
	.btosac{
		margin-top: 0.1rem;
	}
	.btosac img{
		width: .32rem;
		height: .32rem;
		vertical-align: middle;
	}
	.btosac span{
		color: #C2C9D3;
		font-size: .24rem;
	}
	.btotext{
		color: #FF0214;
		font-size: .3rem;
		font-weight: bold;
	}
	.btotextactive{
		color: #0287FF;
	}
  .n{
    width: 92%;
    height: 1.18rem;
    margin: auto;
    margin-top: 0.2rem;
  }
  .img1{
    width: 2.1rem;
    height: 100%;
    float: left;
    border-radius: 0.08rem;
  }
  .right{
    width: calc(92% - 1.8rem);
    height: 100%;
    margin-left: 2.3rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .right p{
    width: 100%;
  }
  .right p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
  }
  .right p:nth-child(2){
    margin-top: 0.18rem;
		text-align: right;
  }
  .right p:nth-child(2) span:nth-child(1){
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.19rem;
    padding: 0.02rem 0.17rem 0.02rem 0.17rem;
    font-size: 0.24rem;
    color:rgba(2,135,255,1);
    line-height:0.32rem;
  }
  .right p:nth-child(2) span:nth-child(2){
    float: right;
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }
  .shang{
    width: 30%;
    height: 0.5rem;
    display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{
    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    margin-left: 0.14rem;
    width: 0.15rem;
    height: 0.13rem;
  }
  .xia{
    width: 92%;
    margin: auto;
    /*margin-top: 0.2rem;*/
    padding-top: 0.2rem;
  }
  .spanspan{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
	width:7.5rem;
	position: absolute;
	left: 0;
	z-index: 9999999;
	background: #fff;
  }
	.pos::-webkit-scrollbar{
	  display:block;
	}
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

</style>
